<template>
    <div class="police-container">
        <!-- 标题 -->
        <section>
            <div class="police-header-title childpage-logo-title">
                <i
                    class="iconfont icon_biaotijiantou"
                    @click="$Ctl.backProvePage()"
                ></i>
                <span class="page-title-text">接处警</span>
            </div>
        </section>
        <!-- 接处警数量 -->
        <section v-show="slideStatus">
            <div class="police-total">
                <div class="police-total-l">
                    <div class="police-total-l-middle">
                        <!-- <img src="../../../assets/images/police/total.png" alt=""> -->
                        <div class="police-total-l-nums">
                            <p>{{ getAlarmStatusCountObj.totalCount }}</p>
                            <p>实时总数</p>
                        </div>
                        <div class="move"></div>
                    </div>
                </div>
                <div class="police-total-r">
                    <ul>
                        <li>
                            <span>报警</span>
                            <p>{{ getAlarmStatusCountObj.fireAlarmCount }}</p>
                        </li>
                        <li>
                            <span>故障</span>
                            <p>{{ getAlarmStatusCountObj.faultAlarmCount }}</p>
                        </li>
                        <li>
                            <span>屏蔽</span>
                            <p>{{ getAlarmStatusCountObj.shieldAlarmCount }}</p>
                        </li>
                        <li>
                            <span>联动</span>
                            <p>
                                {{ getAlarmStatusCountObj.linkageAlarmCount }}
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
        <!-- 书签栏 -->
        <section v-show="slideStatus">
            <ul class="police-book-items">
                <li>
                    <p>未处理</p>
                    <p>{{ getAlarmTotalCountObj.unHandlerCount }}</p>
                </li>
                <li>
                    <p>处理中</p>
                    <p>{{ getAlarmTotalCountObj.processingCount }}</p>
                </li>
                <li>
                    <p>已处理</p>
                    <p>{{ getAlarmTotalCountObj.handlerCount }}</p>
                </li>
            </ul>
        </section>
        <!-- 实时警情 -->
        <section style="height:100%;">
            <div class="realTime-police">
                <div class="realTime-title">
                    <h3 class="childpage-title">实时警情</h3>
                    <span>
                        <img
                            @click="slideUp"
                            src="../../../assets/images/homeLeft/icon-up.png"
                            alt
                            v-if="slideStatus"
                        />
                        <img
                            @click="slideDown"
                            src="../../../assets/images/homeLeft/close.png"
                            alt
                            v-else
                            style="width:13px;height:13px"
                        />
                    </span>
                </div>
                <ul
                    class="realItems"
                    :class="[!slideStatus ? 'slideDownHeight' : '']"
                    v-infinite-scroll="load"
                    infinite-scroll-disabled="scrollStatus"
                >
                    <li
                        :class="
                            (item.fireTTypes&&item.fireTTypes.split(',').indexOf('20')>-1)
                                ? 'warningBg'
                                : (item.fireTTypes&&item.fireTTypes.split(',').indexOf('10')>-1)
                                ? 'errorBg'
                                : 'normalBg'
                        "
                        @click="
                            $Ctl.enterDetail('EquipmentList', {
                                name: item.fcFacilitiesName,
                                fbsId: item.fireBuildingStructureId,
                                systemId: item.fireSystemId,
                                orgId: item.organizationId
                            })
                        "
                        v-for="(item, index) in scrollDatas"
                        :key="index"
                    >
                        <div class="item_img">
                            <el-image
                                fit="cover"
                                :src="JSON.parse(item.detailPic).icon"
                            >
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                        </div>
                        <div class="item_text">
                            <p>
                                <span
                                    v-if="
                                        item.handlerStatus == -1 &&
                                            item.isBeyondHandler == 1
                                    "
                                    style="color:rgba(255, 0, 0, 0.8);"
                                    >超时</span
                                >
                                <span
                                    :class="[
                                        item.handlerStatus == 0
                                            ? 'waitColor'
                                            : item.handlerStatus == 1
                                            ? 'hasColor'
                                            : 'noColor'
                                    ]"
                                    >{{
                                        handlerStatus[item.handlerStatus]
                                    }}</span
                                >
                                <span>{{ item.reportTime }}</span>
                            </p>
                            <el-tooltip
                                effect="dark"
                                :content="
                                    clearString(item.organizationName) +
                                        item.selfDesc
                                "
                                :open-delay="500"
                                ><p>
                                    {{ clearString(item.organizationName)
                                    }}{{ item.selfDesc }}
                                </p></el-tooltip
                            >
                        </div>
                        <div
                            class="item_adress"
                            @click.stop="handlePositionFc(item)"
                        >
                            <img
                                src="../../../assets/images/homeLeft/fix.png"
                                alt
                            />
                        </div>
                    </li>
                </ul>
            </div>
        </section>
    </div>
</template>
<script>
import "@/assets/font/iconfont/iconfont.css";
import {
    getAlarmStatusCount,
    getAlarmTotalCount,
    getAlarmInfoForScreen
} from "@/api/police";
export default {
    name: "ReceivingPoliceL",
    data() {
        return {
            slideStatus: true,
            getAlarmStatusCountObj: {},
            getAlarmTotalCountObj: {},
            scrollDatas: [],
            scrollStatus: false,
            pageIndex: -1,
            pageSize: 25,
            handlerStatus: {
                "0": "处理中",
                "1": "已处理",
                "-1": "未处理"
            },
            fireTTypes: {
                "10": "火警",
                "20": "故障",
                "30": "联动",
                "40": "屏蔽"
            },
            orgIds: ""
        };
    },

    props: {
        parames: {
            required: true
        }
    },
    created() {
        this.orgIds = this.parames.orgIds;
    },
    mounted() {
        // this.getAlarmStatusCount();
        // this.getAlarmTotalCount();
        // this.getAlarmInfoForScreen()
    },
    methods: {
        clearString(value) {
            if (typeof this.orgIds != "string") {
                return "";
            } else {
                return value;
            }
        },
        getAlarmStatusCount() {
            getAlarmStatusCount({ orgIds: this.orgIds,dataType: 0 }).then(res => {
                if (res.status == 200) {
                    this.getAlarmStatusCountObj = res.data;
                }
            });
        },
        getAlarmTotalCount() {
            getAlarmTotalCount({
                orgIds: this.orgIds,
                dataType: 0
            }).then(res => {
                if (res.status == 200) {
                    this.getAlarmTotalCountObj = res.data;
                }
            });
        },
        getAlarmInfoForScreen() {
            getAlarmInfoForScreen({
                orgIds: this.orgIds,
                pageSize: 10,
                pageIndex: this.pageIndex,
                mapType: localStorage.getItem("ilinkBs_currentMapType"),
                dataType: 0
            }).then(res => {
                this.$Ctl.loading(1, 10000);
                if (res.status == 200 && res.data) {
                    let data=res.data.listData
                    this.$Ctl.loading(0);
                    if (data.length != 10) {
                        this.scrollStatus = true;
                    } else {
                        this.scrollStatus = false;
                    }
                    this.scrollDatas = this.scrollDatas.concat(data);
                    this.getAlarmStatusCountObj=res.data.statisticsDto
                    this.getAlarmTotalCountObj=res.data.statisticsDto
                }
            });
        },
        load(pageIndex) {
            this.pageIndex += 1;
            this.getAlarmInfoForScreen();
        },
        slideUp() {
            this.slideStatus = false;
        },
        slideDown() {
            this.slideStatus = true;
        },
        handlePositionFc(item) {
            this.$Ctl.fixedPosition_fc(item.fcFacilitiesId);
        }
    }
};
</script>
<style lang="scss" scoped>
@mixin flex_start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
@mixin flex_between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.slideDownHeight {
    height: calc(100% - 195px) !important;
}
.police-container {
    height: 100%;
    .police-header-title {
        margin-bottom: 30px;
        span {
            span {
                color: #63bdf1;
            }
        }
    }
    .police-total {
        @include flex_start;
        justify-content: space-around;
        .police-total-l {
            overflow: hidden;
            width: 206px;
            height: 206px;
            position: relative;
            background: url("../../../assets/images/police/total.png") no-repeat;
            border-radius: 50%;
            .police-total-l-middle {
                position: absolute;
                top: 25px;
                left: 25px;
                bottom: 25px;
                right: 26px;
                border-radius: 50%;
                overflow: hidden;
                .police-total-l-nums {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    font-size: 34px;
                    color: #ffffff;
                    p {
                        text-align: center;
                        &:nth-child(2) {
                            font-size: 18px;
                            margin-top: 10px;
                        }
                    }
                }
                .move {
                    width: 100%;
                    top: 150px;
                    left: 0;
                    height: 15px;
                    background: linear-gradient(
                        to bottom,
                        rgba(94, 184, 247, 1) 0%,
                        rgba(94, 184, 247, 0) 100%
                    );
                    position: absolute;
                    // border: 1px dashed #5eb8f7;
                    animation: move 4s linear infinite;
                    // animation-direction: alternate;
                }
            }
        }
        .police-total-r {
            ul {
                list-style: none;
                li {
                    list-style: none;
                    color: #ffffff;
                    font-size: 18px;
                    margin-bottom: 10px;
                    @include flex_start;
                    p {
                        width: 100px;
                        margin-left: 40px;
                        padding: 4px 10px;
                    }
                    &:nth-child(1) {
                        p {
                            background-color: rgba(255, 0, 0, 0.3);
                        }
                    }
                    &:nth-child(2) {
                        p {
                            background-color: rgba(213, 148, 73, 0.5);
                        }
                    }
                    &:nth-child(3) {
                        p {
                            background-color: rgba(163, 163, 163, 0.5);
                        }
                    }
                    &:nth-child(4) {
                        p {
                            background-color: #515fdf;
                        }
                    }
                }
            }
        }
        @keyframes move {
            0% {
                top: 150px;
            }
            100% {
                top: 0px;
            }
        }
    }
    .police-book-items {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-top: 30px;
        li {
            width: 140px;
            height: 88px;
            position: relative;
            list-style: none;
            color: #ffffff;
            p {
                &:nth-child(1) {
                    position: absolute;
                    top: 19px;
                    left: 50%;
                    transform: translateX(-50%);
                    font-size: 18px;
                }
                &:nth-child(2) {
                    position: absolute;
                    top: 44px;
                    left: 58px;
                    font-size: 28px;
                }
            }
            &:nth-child(1) {
                background: url("../../../assets/images/police/nohandle.png")
                    no-repeat;
                background-size: 100% 100%;
            }
            &:nth-child(2) {
                background: url("../../../assets/images/police/handling.png")
                    no-repeat;
                background-size: 100% 100%;
            }
            &:nth-child(3) {
                background: url("../../../assets/images/police/hashandle.png")
                    no-repeat;
                background-size: 100% 100%;
            }
        }
    }
    .realTime-police {
        height: 100%;
        .realTime-title {
            @include flex_between;
            align-items: baseline;
            h3 {
                padding: 20px 0;
            }
            img {
                width: 30px;
                height: 18px;
                margin-right: 15px;
                cursor: pointer;
            }
        }

        .realItems {
            height: calc(100% - 540px);
            overflow: auto;
            padding-right: 10px;
            li {
                cursor: pointer;
                position: relative;
                padding: 15px 10px;
                margin-bottom: 10px;
                .waitColor {
                    color: #5eb8f7;
                }
                .noColor {
                    color: #d59449;
                }
                .hasColor {
                    color: #67b692;
                }
                &.normalBg {
                    background: rgba(163, 163, 163, 0.1);
                }
                &.errorBg {
                    background: rgba(255, 0, 0, 0.1);
                }
                &.warningBg {
                    background: rgba(255, 160, 50, 0.1);
                }
                @include flex_start;
                .item_img {
                    width: 48px;
                    height: 48px;
                    .el-image {
                        width: 100%;
                        height: 100%;
                    }
                }
                .item_text {
                    width: calc(100% - 68px);
                    margin-left: 20px;
                    p {
                        font-size: 18px;
                        color: #ffffff;
                        &:nth-child(2) {
                            width: 100%;
                            margin-top: 10px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                }
                .item_adress {
                    position: absolute;
                    top: 0;
                    right: 0;
                    cursor: pointer;
                    height: 40px;
                    width: 40px;
                    padding: 10px 13px;
                }
            }
        }
    }
}
</style>
